// Copyright 2018 The Cockroach Authors.
//
// Use of this software is governed by the Business Source License
// included in the file licenses/BSL.txt.
//
// As of the Change Date specified in that file, in accordance with
// the Business Source License, use of this software will be governed
// by the Apache License, Version 2.0, included in the file
// licenses/APL.txt.

@require nib
@require "~styl/base/palette.styl"
@require "~src/components/core/index.styl"

$dropdown-hover-color = darken($background-color, 2.5%)

.dropdown
  padding 7.5px 9px 7.5px 19px;
  vertical-align middle
  border 1px solid $colors--neutral-4
  border-radius 3px
  white-space nowrap
  padding-right 10px
  color $colors--neutral-6
  cursor pointer
  position relative
  background $colors--neutral-0
  display flex
  align-items center

  :global(.Select)
    position initial

  :global(.Select-menu-outer)
    top calc(100% + 8px)
    padding 8px 0

  :global(.Select-option)
    font-size 14px
    line-height 22px
    font-family $font-family--base
    color $colors--neutral-7 !important
    padding 8px 30px 8px 16px
    &.is-focused, &.is-selected
      color $colors--primary-blue-3 !important
      background-color transparent

  .dropdown__title, :global(.Select-value-label)
    color $adminui-grey-1 !important
    font-family SourceSansPro-SemiBold
    font-size 14px
    line-height 1.71
    letter-spacing 0.1px

  &:hover
    :global(.Select-arrow-zone)
      path
        fill $colors--neutral-5

  &.dropdown--type-secondary
    &:hover
      border-color $colors--neutral-5

    &.dropdown__focused
      background-color $colors--neutral-1
      border 1px solid $colors--neutral-5
      box-shadow 0px 0px 3px 0px $colors--neutral-5

  &.dropdown--type-primary
    &:hover
      border-color $colors--neutral-5

    &.dropdown__focused
      border 1px solid $colors--primary-blue-3 
      box-shadow 0px 0px 3px 2px $colors--primary-blue-1

  :global(.Select-arrow-zone)
    color $adminui-blue-1-base
    .caret-down
      display flex
      justify-content flex-end
      align-items center
    .active
      path
        fill $color--primary-blue-4
  
  &._range
    width 423px
    padding 7px 9px

  &__title
    vertical-align middle
    display inline-block
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select none
    user-select none
    letter-spacing 2px
    line-height 17px
  
  &__range-title
    display flex
    justify-content center
    align-items center
    background $colors--neutral-3
    width 34px
    text-align center
    border-radius 3px
    color $colors--neutral-7
    font-size 12px
    line-height 24px
    letter-spacing 0.1px
    font-family $font-family--bold

  &__select
    display inline-block
    vertical-align middle
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select none
    user-select none
    letter-spacing 2px
    line-height 17px

  &__side-arrow
    font-family $font-family--bold
    display none
    color $adminui-grey-1
    cursor pointer
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select: none;
    user-select: none;

    &:first-child
      border-right 1px solid $button-border-color
      padding 12px 24px
      border-top-left-radius 4px
      border-bottom-left-radius 4px

    &:last-child
      border-left 1px solid $button-border-color
      padding 12px 24px
      border-top-right-radius 4px
      border-bottom-right-radius 4px

    &--disabled
      background-color $table-border-color
      cursor auto

      polyline
        stroke $button-border-color

  &--side-arrows
    padding 0

    &:hover
      background-color transparent

    .dropdown__side-arrow
      display inline

      &:hover
        background-color $dropdown-hover-color
.dropdown.full-size
  :global(.Select-menu-outer), :global(.Select-menu)
    max-height 450px

// NOTE: react-select styles can be found in styl/shame.styl
